<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据展示</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/echarts/echarts.min.js"></script>
    <style type="text/css">
        .layui-card-header{
            color: white;
            font-weight: bold;
        }
        .layui-card-body{
            color: white;
            font-weight: bold;
            font-size: xx-large;
            text-align: center;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend><span style="font-size: xx-large;font-weight: bold;"> 数据展示</span></legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md6">
            <div id="main" style="width: 100%;height:300px;"></div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-row grid-demo layui-col-space10">
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #FFB800;">
                            <div class="layui-card-header">用户数量</div>
                            <div id="numOfUser" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #5FB878;">
                            <div class="layui-card-header">今日借阅人数</div>
                            <div id="numOfBorrowUserToday" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #01AAED;">
                            <div class="layui-card-header">总借阅人数</div>
                            <div id="numOfBorrowUser" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #FF5722;">
                            <div class="layui-card-header">历史借阅人数</div>
                            <div id="numOfBorrowUserTotal" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #FFB800;">
                            <div class="layui-card-header">图书数量</div>
                            <div id="numOfBook" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #5FB878;">
                            <div class="layui-card-header">今日借阅图书</div>
                            <div id="numOfBorrowBookToday" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #01AAED;">
                            <div class="layui-card-header">总借阅图书</div>
                            <div id="numOfBorrowBook" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">
                        <div class="layui-card" style="background-color: #FF5722;">
                            <div class="layui-card-header">历史借阅图书</div>
                            <div id="numOfBorrowBookTotal" class="layui-card-body">无数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){
        initData();
        initChart();
    });
    function initData(){
        $.ajax({
            url: '${pageContext.request.contextPath}/user/getDateAboutUser.do',
            type: 'get',
            dataType: 'json',
            success:function (data){
                $("#numOfUser").html(data.numOfUser);
                $("#numOfBorrowUserToday").html(data.numOfBorrowUserToday);
                $("#numOfBorrowUser").html(data.numOfBorrowUser);
                $("#numOfBorrowUserTotal").html(data.numOfBorrowUserTotal);
            }
        });
        $.ajax({
            url: '${pageContext.request.contextPath}/book/getDateAboutBook.do',
            type: 'get',
            dataType: 'json',
            success:function (data){
                $("#numOfBook").html(data.numOfBook);
                $("#numOfBorrowBookToday").html(data.numOfBorrowBookToday);
                $("#numOfBorrowBook").html(data.numOfBorrowBook);
                $("#numOfBorrowBookTotal").html(data.numOfBorrowBookTotal);
            }
        });
    }

    function initChart() {
        $.ajax({
            url: '${pageContext.request.contextPath}/book/getBookTypeCharts.do',
            type: 'get',
            dataType: 'json',
            success:function (data){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '图书类别',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data.dataList
                        }
                    ]
                };
                myChart.setOption(option);
        }
        });
    }
</script>
</html>